<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>企业个人信息</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/profile.css">
</head>
<body>
    <header class="header">
        <div class="logo">企业招聘系统</div>
        <nav class="main-nav">
            <ul class="nav-list">
                <li class="nav-item"><a href="index.html" class="nav-link">首页</a></li>
                <li class="nav-item"><a href="company-recruitment.html" class="nav-link">招聘管理</a></li>
                <li class="nav-item"><a href="#" class="nav-link active">个人信息</a></li>
            </ul>
        </nav>
        <div class="user-profile">
            <span class="company-name" id="current-company-name">科技有限公司</span>
            <div class="avatar" id="header-avatar"></div>
        </div>
    </header>

    <main class="profile-container">
        <div class="profile-card">
            <div class="profile-header">
                <h2>企业信息设置</h2>
            </div>
            <div class="profile-content">
                <div class="avatar-upload-section">
                    <h3>企业头像</h3>
                    <div class="avatar-preview" id="avatar-preview"></div>
                    <div class="upload-controls">
                        <input type="file" id="avatar-upload" accept="image/*">
                        <button class="btn upload-btn" id="save-avatar-btn">保存头像</button>
                    </div>
                </div>

                <form class="company-info-form" id="company-info-form">
                    <div class="form-group">
                        <label for="company-name">企业名称</label>
                        <input type="text" id="company-name" readonly>
                    </div>
                    <div class="form-group">
                        <label for="company-email">联系邮箱</label>
                        <input type="email" id="company-email">
                    </div>
                    <div class="form-group">
                        <label for="company-phone">联系电话</label>
                        <input type="tel" id="company-phone">
                    </div>
                    <div class="form-group">
                        <label for="company-address">公司地址</label>
                        <input type="text" id="company-address">
                    </div>
                    <div class="form-group">
                        <label for="company-description">公司简介</label>
                        <textarea id="company-description" rows="4"></textarea>
                    </div>
                    <div class="form-actions">
                        <button type="submit" class="btn save-info-btn">保存信息</button>
                    </div>
                </form>
            </div>
        </div>
    </main>

    <script>
        // 获取当前企业信息并填充表单
        document.addEventListener('DOMContentLoaded', function() {
            fetch('http://localhost:3001/api/company/info')
                .then(response => response.json())
                .then(data => {
                    if (data) {
                        // 更新头部信息
                        document.getElementById('current-company-name').textContent = data.companyName || '未设置';
                        const headerAvatar = document.getElementById('header-avatar');
                        if (data.avatarUrl) {
                            headerAvatar.style.backgroundImage = `url(${data.avatarUrl})`;
                            headerAvatar.style.backgroundSize = 'cover';
                        }

                        // 更新预览头像
                        const avatarPreview = document.getElementById('avatar-preview');
                        if (data.avatarUrl) {
                            avatarPreview.style.backgroundImage = `url(${data.avatarUrl})`;
                            avatarPreview.style.backgroundSize = 'cover';
                        }

                        // 填充表单
                        document.getElementById('company-name').value = data.companyName || '';
                        document.getElementById('company-email').value = data.email || '';
                        document.getElementById('company-phone').value = data.phone || '';
                        document.getElementById('company-address').value = data.address || '';
                        document.getElementById('company-description').value = data.description || '';
                    }
                })
                .catch(error => console.error('获取企业信息失败:', error));

            // 头像上传预览
            const avatarUpload = document.getElementById('avatar-upload');
            const avatarPreview = document.getElementById('avatar-preview');

            avatarUpload.addEventListener('change', function(e) {
                const file = e.target.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        avatarPreview.style.backgroundImage = `url(${e.target.result})`;
                        avatarPreview.style.backgroundSize = 'cover';
                    };
                    reader.readAsDataURL(file);
                }
            });

            // 保存头像
            document.getElementById('save-avatar-btn').addEventListener('click', function() {
                const file = avatarUpload.files[0];
                if (!file) {
                    alert('请选择图片文件');
                    return;
                }

                const formData = new FormData();
                formData.append('avatar', file);

                fetch('http://localhost:3001/api/company/avatar', {
                    method: 'POST',
                    body: formData
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        alert('头像上传成功');
                        // 更新头部头像
                        const headerAvatar = document.getElementById('header-avatar');
                        headerAvatar.style.backgroundImage = `url(${data.avatarUrl})`;
                        headerAvatar.style.backgroundSize = 'cover';
                    } else {
                        alert('上传失败: ' + (data.message || '未知错误'));
                    }
                })
                .catch(error => console.error('上传头像失败:', error));
            });

            // 保存企业信息
            document.getElementById('company-info-form').addEventListener('submit', function(e) {
                e.preventDefault();

                const companyInfo = {
                    email: document.getElementById('company-email').value,
                    phone: document.getElementById('company-phone').value,
                    address: document.getElementById('company-address').value,
                    description: document.getElementById('company-description').value
                };

                fetch('http://localhost:3001/api/company/info', {
                    method: 'PUT',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(companyInfo)
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        alert('企业信息保存成功');
                    } else {
                        alert('保存失败: ' + (data.message || '未知错误'));
                    }
                })
                .catch(error => console.error('保存企业信息失败:', error));
            });
        });
    </script>
</body>
</html>